<template>
    <div>
        <div class="topspanFixld homeContent backGFFF" :class="[topspanFixld ? 'move' : '']">
            <span class="homeNameRz fontSize24 color5b5e5e topspan backGFFF" @dblclick="oTop()" :style="topspanFixldPaddingTop">
                <img class="fl" :src="user.imagePath" style="margin-top:.15rem;" width="20" alt="" @click.stop="startEditUserInfo()">
                <em class="fl color000" style="margin-left:.2rem;">{{user.nickname}}</em>
                <!-- <em class="fl editor" v-if="isMon == 1">发布</em> -->
                <p class="fr subscribe colorFFF" style="margin-top:.2rem; margin-right:.4rem;" :class="[focusStatus == 0 ? 'colorFFF' : 'textC backgroundedeeee color5b5e5e']" v-show="userId != homeId" @click.stop="addOn()">
                    <span class="dot fl" v-if="focusStatus == 0"></span>
                    {{focusStatus == 0 ? '關註' : '已關註'}}
                </p>
            </span>
        </div>
        <div class="homeBoxOne">
           <div class="homeHeader" @click="updateHeaderImg()" :style="{backgroundImage:`url(`+(user.headImage ? user.headImage : headImage)+`)`}">
                <img class="headerImg" :src="user.imagePath?user.imagePath:$defaultSetting.defaultPortrait" ref="imagePathTop" alt="" @click.stop="startEditUserInfo()">
                <span class="chatNum" @click.stop="isChat()" v-if="isMon == 1">
                    <img class="fl" src="../../assets/img/lt.png" alt="">
                    <em class="fontSize32 fl" style="padding-right:.05rem;line-height:.45rem;">{{chatNum}}</em>
                </span>
                <span class="chatNum" @click.stop="isChat()" v-else>
                    <img class="fl" src="../../assets/img/lt.png" alt="">聊天
                </span>
            </div>
            <div class="homeContent">
                <span class="homeName fontSize38 color000">
                    <em class="fl">{{user.nickname}}</em>
                    <img v-show="user.status == 1" class="fl" src="../../assets/img/v.png" alt="">
                </span>
                <span class="homeNameRz fontSize24 color5b5e5e">
                    <em v-if="user.status == 1">認證：{{user.certName}}</em>
                    <em v-else>未認證用戶</em>
                    <img class="homeNameRzImg fr" v-if="isMon == 1" src="../../assets/img/fb.png" alt="" @click="release()">
                    <!-- <em class="fr editor" v-if="isMon == 1" @click="release()">發布</em> -->
                    <p class="fr subscribe colorFFF" v-else style="margin-top:0;" :class="[focusStatus == 0 ? 'colorFFF' : 'textC backgroundedeeee color5b5e5e']" @click="addOn()">
                        <span class="dot fl" v-if="focusStatus == 0"></span>
                        {{focusStatus == 0 ? '關註' : '已關註'}}
                    </p>
                </span>
                <span class="homeName fontSize24 homeTit">
                    {{user.personSign}}
                </span>
                <span class="homeNameRz fontSize24 color5b5e5e">
                    <em class="homeEm fontSize28">{{user.meFocusNum}}</em>關註
                    <em class="homeEm fontSize28">{{user.focusMeNum}}</em>粉絲
                </span>
            </div> 
            <div class="homeListTab fontSize30">
                <span :class="[(typeTab == 'dynamic' || typeTab == '' || typeTab == undefined) ? 'active' : '']" @click="hometab('dynamic')">動態</span>
                <span :class="[typeTab == 'article' ? 'active' : '']" @click="hometab('article')">文章</span>
            </div>
        </div>
        <div class="homeListBox">
            <div class="homeList" v-infinite-scroll = "loadMores" infinite-scroll-disabled = 'loading' infinite-scroll-distance = '30'>
                <div class="homeListContent imgBoxDivBottom" v-for="(item,index) in dynamicList" :key="index" v-if="typeTab == 'dynamic' || typeTab == '' || typeTab == undefined">
                    <div class="divOne">
                        <span class="fl fontSize28 color5b5e5e">{{item.createTime | dateServer}}</span>
                        <span class="fr fontSize28 homeEm" v-if="item.dynamicType == 1" style="color:#00a8ff;">學海</span>
                        <span class="fr fontSize28 homeEm" v-else-if="item.dynamicType == 2">同學</span>
                        <span class="fr fontSize28 homeEm" v-else>僅自己可見</span>
                    </div>
                    <div class="fontSize fontSize30 dynamicListContent" @click="detailLink(item,'dynamic')" v-html="$interceptionMessage(item.content)">
                        <!-- {{item.content | contentNum}} -->
                    </div>
                    <div class="focusContent fontSize28 pubTypeThree" @click="detailLink(item,'dynamic')" v-if="item.pubType == 3">
                        <em>{{$stringMessage(item.forwardContent)[0]}}</em>{{$stringMessage(item.forwardContent)[1]}}
                    </div>
                    <div class="divImgOne" v-if="item.contentImage && item.contentImage.length == 1">
                        <p v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" @click="imgbig(imgIndex,item.contentImage)">
                            <img :src="imgItme" alt="">
                        </p>
                    </div>
                    <div class="focusImgBox" v-if="item.contentImage && item.contentImage.length == 2">
                        <p class="fl twop" v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,item.contentImage)">
                            <img :src="$imgItmeFiler(imgItme)" alt="">
                        </p>
                    </div>
                    <div class="focusImgBox" v-if="item.contentImage && item.contentImage.length > 2">
                        <p class="fl threep" v-for="(imgItme,imgIndex) in item.contentImage" :key="imgIndex" :style="[imgIndex%3==0 ? '' : marginLeft,imgIndex>2 ? marginTop : '']" @click="imgbig(imgIndex,item.contentImage)">
                            <img :src="$imgItmeFiler(imgItme)" alt="">
                        </p>
                    </div> 
                    <div class="focusHe" @click="detailLink(item,'dynamic')">
                        <div class="address fontSize26 color5b5e5e">
                            <img v-show="item.addr != null" src="../../assets/img/address.png" class="fl" alt="">
                            <font class="reading" v-show="item.addr != null">{{item.addr}}</font>
                            <font>閱讀</font>
                            <font>{{item.readCount}}</font>
                            <span class="fr" v-show="userId == homeId" @click.stop="delectbox(index,item.id,item.pubUserId)">删除</span>
                        </div>
                        <div class="chpl friendImg">
                            <span class="fl"><img src="../../assets/img/xh2.png" alt="" @click.stop="forwarding(item)">{{item.transpondCount}}</span>
                            <span class="fl"><img class="imgpl" src="../../assets/img/pl2.png" alt="">{{item.comCount}}</span>
                            <span class="fl textR" @click.stop="addPraise(item)">
                                <font class="fr">{{item.praiseCount}}</font>
                                <img v-if="item.exiPraise" src="../../assets/img/011.png" alt="">
                                <img v-else src="../../assets/img/022.png" alt="">
                            </span>
                        </div>
                    </div>  
                    <div class="friendDiv" v-for="(commItem,commIndex) in item.commentList" :key="commIndex">
                        <div class="nameBox focusDw fiendContent">
                            <p class="fl pOne pDetail">
                                <img :src="commItem.imagePath" alt="">
                            </p>
                            <p class="fl ptt">
                                <font class="provenance fontSize22 color717070">
                                <em class="fl color000">{{commItem.nickname}}</em>
                                </font>
                                <font class="provenanceTiem fontSize22"><em class="color717070">{{commItem.createTime | dateServer}}</em></font>
                            </p>
                        </div>
                        <div class="fontSize28">
                            {{commItem.comtContent}}
                        </div>
                    </div>
                </div>
                <div class="homeDivList" v-if="typeTab == 'article'" v-for="(item,index) in dynamicList" :key="index" @click="detailLink(item,'article')">
                    <img class="fl" :src="item.contentImage[0]">
                    <div class="fl homeDivListBox">
                        <div class="homeBox">
                            <p class="fontSize36">
                                {{item.title}}
                            </p>
                            <p class="fontSize24">
                                <span>{{item.createTime | dateServer}}</span>
                                <span class="comCountNum">{{item.comCount}}跟帖</span>
                                <span class="comCountNum fr" v-show="userId == homeId" @click.stop="delectbox(index,item.id,item.pubUserId)">删除</span>
                            </p>
                        </div>
                    </div>
                </div>
                <p v-if='loadingDom' class='loading'>
                    没有更多数据
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import apiDetail from '../../api/detail'
import apiCircle from '../../api/circle'
import { MessageBox,Toast,InfiniteScroll} from 'mint-ui'
export default {
    data(){
        return{
            marginLeft:{
                marginLeft:'2%'
            },
            marginTop:{
                marginTop:'1%'
            },
            imgMarginLeft:{
                marginLeft:'.03rem'
            },
            imgMarginTop:{
                marginTop:'.03rem'
            },
            pageSize:10,
            pageNum:1,
            userId: this.$route.query.userId,
            homeId: this.$route.query.homeId,
            typeTab: this.$route.query.typeTab,
            tab:this.$route.query.tab,
            dynamicList:[],
            user:'',
            swiperImg:[],
            isMon:'',
            focusStatus:'',
            txPicTop:'',
            topspanFixld:false,   // 顶部个人信息
            chatNum:'',
            timer:'',
            isDialog:false,
            dialogConment:'',
            loading:true,
            loadingDom: false,
            pages:'',    // 总页数
            headImage: this.$defaultSetting.defaultBackgroundImage,
            topspanFixldPaddingTop:{
                paddingTop:''
            }
        }
    },
    mounted(){
        window.receptionMessage = this.receptionMessage
        this.homeDetail(this.typeTab)
        this.userMon()
        // 判断进入个人主页的是否本人
        if(this.userId == this.homeId || this.$route.query.indexHome){
            this.isMon = 1
            this.unReadCount()
            this.timer = setInterval(()=>{
                this.unReadCount()
            },60000)
        }else{
            this.isMon = 2
        }
        // 订阅按钮判断
        this.focus()
        // 判断机型
        if(this.$isiOS){
            this.topspanFixldPaddingTop.paddingTop = '.3rem'
        }
        window.addEventListener(`scroll`,()=>{
            if(window.pageYOffset>=this.txPicTop){
                this.topspanFixld = true
            }else{
                this.topspanFixld = false
            }
        })
    },
    methods:{
        //更换顶部图片
        updateHeaderImg(){
            let self = this
            if(self.userId == self.homeId || self.$route.query.indexHome){
                if(self.$isAndroid){
                    window.android.editCover()
                }else if(self.$isiOS){
                    window.webkit.messageHandlers.editCover.postMessage('')
                }
            }  
        },
        receptionMessage(imgaBase64){
            let self = this
            apiCircle.headImage({id:self.userId,imageSuffix:'png',imageData:imgaBase64}).then(data => {
                if(data.body.returnMsg == 'success'){
                    self.user.headImage = data.body.data
                }
            })
        },
        // 返回顶部
        oTop(){
            document.documentElement.scrollTop = document.body.scrollTop = 0
        },
        // 调取确认删除弹框+删除动态
        delectbox(index,id,pubUserId){
            MessageBox.confirm('您确定要删除吗?').then(action => {
                apiCircle.del({id:id,pubUserId:pubUserId}).then(data => {
                    if(data.body.returnMsg == 'success'){
                        this.dynamicList.splice(index,1)
                        Toast('删除成功')
                    }
                })
            });
        },
        // 发布跳转
        release(){
            if(this.$isAndroid){
                window.android.toPublishView()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.toPublishView.postMessage('')
            }
        },
        //  接受正常登陆之后的userId
        appLoginId(userId){
            this.userId = userId
            this.tab = ''
        },
        // 跳转登陆
        loginHtml(){
            if(this.$isAndroid){
                window.android.isUserPermissions()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.isUserPermissions.postMessage('')
            }
        },
        // 聊天跳转页面
        isChat(){
            if(this.tab == 4){
                this.loginHtml()
            }else{
                let self = this
                if(self.userId == self.homeId || self.$route.query.indexHome){  //  判断登陆的这个是不是进入的是自己的主页，如果是：则跳转聊天列表页，反之：跳转到聊天界面
                    if(self.$isAndroid){
                        window.android.goToChatView(window.location.origin + '/h5ext/#/chatList?userId='+self.userId,JSON.stringify(self.user))
                    }else if(self.$isiOS){
                        self.user.jumpLink = window.location.origin + '/h5ext/#/chatList?userId='+self.userId
                        window.webkit.messageHandlers.goToChatView.postMessage(JSON.stringify(self.user))
                    }
                }else{
                    if(self.$isAndroid){
                        window.android.goToChatView(window.location.origin + '/h5ext/#/chat/' +self.userId+'/'+self.homeId,JSON.stringify(self.user))
                    }else if(self.$isiOS){
                        self.user.jumpLink = window.location.origin + '/h5ext/#/chat/' +self.userId+'/'+self.homeId
                        window.webkit.messageHandlers.goToChatView.postMessage(JSON.stringify(self.user))
                    }
                }
            }
        },
        // 编辑资料跳转链接
        startEditUserInfo(){
            if(this.userId == this.homeId){
                if(this.$isAndroid){
                    window.android.startEditUserInfo()
                }else if(this.$isiOS){
                    window.webkit.messageHandlers.startEditUserInfo.postMessage('')
                }
            }
            
        },
        // 跳转到详情
        detailLink(item,category){
            if(this.$isAndroid){
                window.android.detailHref(window.location.origin + '/h5ext/#/detail?id=' +item.id+'&userId='+this.userId+'&tab='+this.tab,category)
            }else if(this.$isiOS){
                window.webkit.messageHandlers.detailHref.postMessage(window.location.origin + '/h5ext/#/detail?id=' +item.id+'&userId='+this.userId+'&tab='+this.tab)
            }
        },
        // 判断是否订阅
        focus(){
            let parms = {}
            parms = {userId:this.userId,attentionId: this.homeId}
            apiDetail.focusOn(parms).then(data => {
                this.focusStatus = data.body.data.focusStatus
            })
        },
        // 详细操作   订阅
        addOn(){
            if(this.tab == 4){
                this.loginHtml()
            }else{
                let parms = {userId:this.userId,attentionId:this.homeId,focusStatus:this.focusStatus}
                apiDetail.addFocus(parms).then(data => {
                    if(data.body.returnMsg == 'success'){
                        this.focusStatus = data.body.data.focusStatus
                    }
                })
            }
        },
        // 动态和文章切换
        hometab(id){
            this.dynamicList = []
            this.homeDetail(id)
        },
        // 个人主页动态
        homeDetail(tab){
            let self = this
            self.typeTab = tab
            let tabId = ''
            if(this.typeTab == 'dynamic' || this.typeTab == '' || this.typeTab == undefined){
                tabId = 1
            }else{
                tabId = 2
            }
            let parmes = {pageSize:this.pageSize,pageNum:this.pageNum,pubUserId:this.homeId,pubType:tabId,userId:this.userId}
            apiCircle.enventSpace(parmes).then(data => {
                if(data.body.returnMsg == "success" && data.body.data != null){
                    self.pages = data.body.data.pages
                    for(let i = 0; i < data.body.data.list.length; i++){
                        if(data.body.data.list[i].contentImage != null){
                            data.body.data.list[i].contentImage = data.body.data.list[i].contentImage.split(',')
                        }
                        this.dynamicList.push(data.body.data.list[i])
                        this.loading = false
                    }
                }
                this.$nextTick(()=>{
                    this.txPicTop = self.$refs.imagePathTop.offsetTop
                })
            })
        },
        // 转发
        forwarding(item){
            if(this.userId == item.pubUserId){
                Toast('您不能转发自己')
                return false
            }
            if(item.dynamicId && item.forwoardUserId && item.forwoardUserType){
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.forwoardUserId,item.forwoardUserType,item.nickname,item.dynamicId)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'forwoardUserId':item.forwoardUserId,
                        'forwoardUserType':item.forwoardUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.dynamicId
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }else{
                if(this.$isAndroid){
                    window.android.forWard(item.contentImage ? item.contentImage.join(',') : '',item.content,item.pubUserId,item.pubUserType,item.nickname,item.id)
                }else if(this.$isiOS){
                    let forWardString = {
                        'imgArray':item.contentImage ? item.contentImage.join(',') : '',
                        'title':item.content,
                        'pubUserId':item.pubUserId,
                        'pubUserType':item.pubUserType,
                        'nickname':item.nickname,
                        'dynamicId':item.id
                    }
                    window.webkit.messageHandlers.forWard.postMessage(JSON.stringify(forWardString))
                }
            }
        },
        //分页加载更多
        loadMores() {
            this.pageNum++
            this.loading = true
            if(this.pageNum <= this.pages){
                this.homeDetail(this.typeTab)
            }else{
                this.loadingDom = true
            }
        },
        //  个人信息
        userMon(){
            apiCircle.userList({id:this.homeId}).then(data=>{
                if(data.body.returnMsg == "success"){
                    this.user = data.body.data
                   // 给App发送homeId   拉黑
                    if(this.$isAndroid){
                        window.android.getUserInfo(data.body.data.imagePath,this.homeId,data.body.data.nickname)
                    }else if(this.$isiOS){
                        let getUserInfoMsg = data.body.data.imagePath + ',' + this.homeId + ',' +data.body.data.nickname
                        window.webkit.messageHandlers.getUserInfo.postMessage(getUserInfoMsg)
                    }
                }
            })
        },
        // 聊天信息数量
        unReadCount(){
            apiCircle.unReadCount({userId:this.userId}).then(data=>{
                if(data.body.returnMsg == 'success'){
                    this.chatNum = data.body.data
                }
            })
        },
        //  点赞
        addPraise(item){
            if(this.userId){
                let parmes = {userId:this.userId,newsId:item.id,newsType:11}
                apiCircle.enventPraise(parmes).then(data => {
                    if(data.body.returnMsg == "success"){
                        item.exiPraise = !item.exiPraise
                        item.praiseCount = data.body.data    
                    }
                })
            }
        },
        // 点击图片放大
        imgbig(index,contentImage){
            if(this.$isAndroid){
                window.android.getBigImagePaths(index,contentImage.join(','))
            }else if(this.$isiOS){
                let stringImg = index +','+ contentImage.join(',')
                window.webkit.messageHandlers.getBigImagePaths.postMessage(stringImg)
            }
        }
    },
    filters:{
        contentNum(val){
            if(val !=null && val.length>80){
                return val.substr(0,80)+'...'
            }else{
                return val
            }
        }
    },
    beforeDestroy () {
        if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.timer); //关闭
        }
    }
}
</script>
<style scoped>
.friendImg img:nth-child(1){
    width: .4rem;
    padding-left: 0;
}
.editor{
    margin-left: .2rem;
}
.homeNameRzImg{
    width: .5rem;
}
</style>
